<template>
    <div class="loginBox">
        <div class="container center">
            <h1 class="title t-center">VUE2通用后台管理系统</h1>
            <div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item prop="user_name">
                        <el-input prefix-icon="el-icon-user-solid" type="text" v-model="ruleForm.user_name"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-s-marketing" type="password" v-model="ruleForm.password"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="loginBtnBox">
                        <el-button class="loginBtn" type="primary" @click="login">登录</el-button>
                        <el-button class="registerBtn" type="primary" @click="register">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { login } from '@/utils';
export default {
    data() {
        return {
            ruleForm: {
                user_name: '',
                password: '',
            },
            rules: {
                user_name: [
                    { required: true, trigger: 'blur', message: '请输入用户名' }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '请输入密码' }
                ]
            }
        }
    },
    methods: {
        async login() {
            const res = await login(this.ruleForm.user_name, this.ruleForm.password)
            localStorage.setItem('token', res.data.result.token)
            if (res.data.code != 0) {
                this.$message({
                    message: res.data.message,
                    type: 'error'
                })
                return
            }
            this.$router.push('/1-1')
        },
        async register() {
            const { data: res } = await this.$ajax.post('/api/users/register', {
                user_name: this.ruleForm.user_name,
                password: this.ruleForm.password
            })
            if (res.code == 0) {
                this.$message({
                    message: res.message,
                    type: 'success'
                })
            } else {
                this.$message({
                    message: res.message,
                    type: 'error'
                })
            }
        }
    }
}
</script>

<style scoped>
.loginBox {
    width: 100%;
    height: 100%;
    background: url(../assets/loginBgi.png);
    background-size: cover;
}

.container {
    width: 700px;
    height: 370px;
    padding: 40px 40px 12px 12px;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.title {
    margin-left: 40px;
    color: white;
}

.loginBox {
    width: 100%;
}

.loginBtn {
    width: 49%;
}

.registerBtn {
    width: 49%;
}

::v-deep .el-input__inner {
    background-color: #e5e5e5;
}
</style>
